<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>案例列表</title>
		<link rel="stylesheet" type="text/css" href="css/comoon.css" />
		<link rel="stylesheet" type="text/css" href="css/caselist.css" />
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1837825_n1h8bchyyw.css"/>
	</head>
	<body>
		<div class="container">
			<!-- 头部 -->
			<header>
				<div class="logo">
					<a href="index.html">
						<img src="img/logo.png" alt="">
					</a>
				</div>
				<nav>
					<ul>
						<li>
							<a href="index.html">
								<h3>首页</h3>
								<span>home</span>
							</a>
						</li>
						<li>
							<a href="gameList.html">
								<h3>游戏列表</h3>
								<span>game</span>
							</a>
						</li>
						<li class="active">
							<a href="caseList.html">
								<h3>案例列表</h3>
								<span>Case</span>
							</a>
						</li>
						<li>
							<a href="gamePage.html">
								<h3>游戏内页</h3>
								<span>About us</span>
							</a>
						</li>
						<li>
							<a href="mine.html">
								<h3>个人中心</h3>
								<span>About us</span>
							</a>
						</li>
					</ul>
					<div class="weixin">
						<img src="img/weixin.png" alt="">
					</div>
				</nav>
			</header>
			<!-- 横幅 -->
			<div class="swiper">
				<img src="img/banner_01.jpg" alt="">
			</div>
			<!-- 内容 -->
			<div class="main">
				<!-- <div class="m_top">
					<ul>
						<li class="active">
							<a href="#">
								<h4>狂转游戏</h4>
								<p>Turn mad game</p>
							</a>
						</li>
						<li>
							<a href="#">
								<h4>抽奖游戏</h4>
								<p>Lottery game</p>
							</a>
						</li>
					</ul>
				</div> -->
				<!-- 主体 -->
				<div class="m_center">
					<img src="img/list_icon_01.png" alt="">
					<img src="img/list_icon_02.png" alt="">
					<div class="page_header">
						<span class="active">排序</span>
						<span>按时间</span>
						<span>按销量</span>
						<span>按种类</span>
					</div>
					<ul class="page_content">
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>剑圣传奇</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_01.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>PLAGUE LNC</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_02.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>地狱边境</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_03.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>功夫西游</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_04.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>宝石迷阵</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_05.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>植物大战僵尸</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_06.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>狂斩三国</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_08.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>世界迷雾</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_09.jpg" alt="">
							</div>
						</li>
						<li>
							<div class="c_header">
								<div class="c_title">
									<h5>消灭星星游戏</h5>
									<a href="#">购买</a>
								</div>
								<div class="date">
									<div class="date_left">
										<p>2014-07-09</p>
										<p>使用次数：20</p>
									</div>
									<div class="date_right">
										<i class="iconfont icon-caidan_wujiaoxingkong"></i>
									</div>
								</div>
							</div>
							<div class="c_img">
								<img src="img/article_10.jpg" alt="">
							</div>
						</li>
					</ul>
					<div class="page_footer">
						<div class="prev">
							<i class="iconfont icon-xiangzuo"></i>
						</div>
						<ul class="number">
							<li>1</li>
							<li>2</li>
							<li class="active">3</li>
							<li>4</li>
							<li>5</li>
							<li>6</li>
							<li>......</li>
							<li>12</li>
						</ul>
						<div class="next">
							<i class="iconfont icon-you"></i>
						</div>
					</div>
				</div>
			</div>
			<!-- 尾部 -->
			<footer>
				<img src="img/footer.png" alt="">
				<p>Copyright © 2014 Pangtang. All Rights Reserved. 版权所有</p>
			</footer>
		</div>
	</body>
</html>
